<template>
  <div class="breakthrough-main">
    <div class="reward-main" :style="rewardsMainStyle">
      <div :class="bobmShow ? 'bobm' : ''" v-if="finishList.length > 0"></div>
      <div class="new-rewards" v-if="finishList.length > 0 " :style="rewardMove?rewardsMoveStyle:''">
        <img :src="newReward.icon" alt=" ">
        <div class="reword-name" v-if="!rewardMove && !bobmShow">{{name}}</div>
      </div>
      <div class="rewards" v-if="finishList.length > 0">
        <div v-for="(item,index) in rewardsMap" :key="index + 100">
          <div class="reward" :style="rewardsStyle(index)" v-if="item.isShow">
            <div class="reward-bobm" v-if="bobImg && index === i"></div>
            <img :src="item.icon" alt="">
          </div>
        </div>
      </div>
      <div class="reward-finish" v-if="finishList.length === 0 ">
        <div class="reward-finish-list" v-for="(item,index) in rewardsMap" :key="index + 100"
          :style="rewardsFinishStyle(index)">
          <img :src="item.icon" alt="">
        </div>
      </div>
    </div>
    <div class="select" v-if="finishList.length > 0">
      <div class="awards" @touchend.stop="awardsTouch"></div>
      <div class="next" @touchend.stop="nextQuestionTouch"></div>
    </div>
    <div class="awards-finish" v-if="finishList.length === 0" @touchend.stop="awardsAllTouch">
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  props: ['activeIndex', 'assignment', 'questionIndex', 'isBreakStart'],
  data() {
    return {
      rewardList: [],    //获取的奖励列表
      rewardsMap: [],    //去重后的奖励池
      newReward: {},      //新获取的奖励
      finishList: [],     //判断是不是一轮把题做完了
      imgList: [],        //意向
      baseList: [],       //背景图
      bobmShow: false,    //显示光效
      rewardMove: false,  //判断重复
      bobImg: false,      //小图标的光效
      i: -1,               //奖励池中重复的对象下标
      num: 0,             //时间戳的计算
      timer: null         //定时器
    }
  },
  mounted() {
    clearInterval(this.timer)
    this.num = 0
    this.rewardsMap.forEach(item => { this.$set(item, 'isShow', false) })
    this.timer = setInterval(() => {
      this.$set(this.rewardsMap[this.num], 'isShow', true)
      this.num++
      if (this.num === this.rewardsMap.length) clearInterval(this.timer)
    }, 200)
    setTimeout(() => { this.bobmShow = true }, 10)
    setTimeout(() => { this.bobmShow = false }, 1300)
  },
  created() {
    this.finishList = this.assignment[this.questionIndex].filter(item => { return !item.isFinish })
    if (this.isBreakStart) this.deleteReward()
    if (this.reward.length > 0) this.rewardList = [...this.reward]
    this.imageryItem.forEach(item => {
      if (item.eryPage - 1 === this.contentIndex) this.imgList.push(item)
    })
    this.contentItem.forEach(item => {
      if (item.id === this.questionIndex) this.baseList.push(item)
    })
    const rewardCountList = [this.imgList, this.roleAwards, this.baseList].filter(item => { return item.length > 0 })
    const reword = parseInt(Math.random() * rewardCountList.length)
    const num = parseInt(Math.random() * rewardCountList[reword].length)
    if (rewardCountList[reword] === this.baseList) {
      const arr = {
        type: "scene",
        icon: this.baseList[num].bgImg,   //场景图标 对象替换成要奖励的
        content: {} //场景不需要内容
      }
      this.newReward = arr
      this.rewardList.push(this.newReward)
    } else if (rewardCountList[reword] === this.imgList) {
      const arr = {
        type: "imagery",
        icon: this.imgList[num].icon,  // 意象图标 对象替换成要奖励的
        content: this.imgList[num]
      }
      this.newReward = arr
      this.rewardList.push(arr)
    } else {
      const arr = {
        type: "role",
        icon: this.roleAwards[num].imageUrl, //角色图标 对象替换成要奖励的
        content: this.roleAwards[num]
      }
      this.newReward = arr
      this.rewardList.push(arr)
    }
    this.rewardList.forEach((item, index) => {
      if (this.rewardList[index].icon === this.newReward.icon && index < this.rewardList.length - 1) {
        this.i = index
        setTimeout(() => { this.rewardMove = true }, 1500 + this.num * 200)
        setTimeout(() => {
          this.rewardMove = false
          this.bobImg = true
        }, 2500 + this.num * 200)
      }
    })
    let obj = {}
    for (let i = 0; i < this.rewardList.length; i++) {
      if (!obj[this.rewardList[i].icon]) {
        this.rewardsMap.push(this.rewardList[i]);
        obj[this.rewardList[i].icon] = true;
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.num = 0
  },
  computed: {
    rewardsMainStyle() {
      return {
        background: this.finishList.length === 0 ?
          'url(' + this.variable.STATICE_URLTITLE + 'assignment/image/breakthrough/全部成功-背景.png)center center/contain no-repeat'
          : 'url(' + this.variable.STATICE_URLTITLE + 'assignment/image/breakthrough/回答正确-背景（有字）.png)center center/contain no-repeat'
      }
    },
    rewardsFinishStyle(index) {
      return function (index) {
        const rewardWidth = 5.5 - parseInt(this.rewardsMap.length / 4) * 1.5 + 'rem'
        return {
          width: rewardWidth,
          height: rewardWidth,
          lineHeight: rewardWidth
        }
      }
    },
    name() {
      switch (this.newReward.type) {
        case "imagery":
          return this.newReward.content.explain
          break
        case "role":
          return this.newReward.content.roleName
          break
        default:
          return "场景"
          break
      }
    },
    rewardsMoveStyle() {
      const moveX = -7 + this.i * 3
      return {
        transform: 'translate(' + moveX + 'rem, 5rem) scale(0.5)',
        transition: 'all 1s'
      }
    },
    rewardsStyle(index) {
      return function (index) {
        return {
          left: 0 + index * 3 + 'rem'
        }
      }
    },
    ...mapGetters("packStatus", {
      pack: "getPack"
    }),
    ...mapGetters('assignmentStatus', {
      reward: "getReward"
    }),
    ...mapGetters("contentStatus", {
      contentIndex: "getContentIndex",
      contentItem: "getContentItem"
    }),
    ...mapGetters("imageryStatus", {
      imageryItem: "getImageryItem"
    }),
    ...mapGetters("roleStatus", {
      roleAwards: "getRoleAwards"
    }),
  },
  methods: {
    awardsTouch: function () {
      this.touchMusic()
      let res = this.pack.some(item => {
        if (item.icon === this.newReward.icon) {
          return true
        }
      })
      if (!res) {
        this.insertReward(this.newReward)
      }
      this.rewardsMap.forEach(item => {
        this.insertPack(item)
      })
      this.$router.push({ path: "/picbook", query: { index: this.$route.query.index, beforeRouter: this.$route.query.beforeRouter } })
      this.setLoading({
        callback: () => {
          this.$parent.breakStartTouch()
        }
      })
    },
    awardsAllTouch: function () {
      this.touchMusic()
      this.rewardsMap.forEach(item => {
        this.insertPack(item)
      })
      this.$router.push({ path: "/picbook", query: { index: this.$route.query.index, beforeRouter: this.$route.query.beforeRouter } })
      this.setLoading({
        callback: () => {
          this.$parent.breakStartTouch()
        }
      })
    },
    nextQuestionTouch: function () {
      this.touchMusic()
      setTimeout(() => { this.$emit('nextAssignment') }, 600)
      this.$parent.breakStartTouch()
      let res = this.reward.some(item => {
        if (item.icon === this.newReward.icon) {
          return true
        }
      })
      if (!res) {
        this.insertReward(this.newReward)
      }
    },
    ...mapActions("packStatus", ["insertPack"]),
    ...mapActions("assignmentStatus", ["insertReward", "deleteReward"]),
    ...mapActions("mainStatus", ["setLoading"])
  }
}
</script>

<style scoped lang='stylus'>
@import '../../../src/common/stylus/base.styl'
@keyframes bigBobm
  0%
    transform scale(0)
  50%
    transform scale(6)
  100%
    transform scale(0)
.breakthrough-main
  position fixed
  width 100%
  height 100%
  background url($urlTitle + 'assignment/image/breakthrough/半透明背景60.png') 0 0 / 100% 100%
  z-index 9999
  opacity 0
  animation fadeIn 1s
  animation-fill-mode forwards
  .reward-main
    position absolute
    $center('WHLT', 26rem, 26rem)
    margin-top -16rem
    .bobm
      position absolute
      $center('WHLT', 3rem, 3rem)
      line-height 3rem
      margin-top 0rem
      background url($urlTitle + 'assignment/image/breakthrough/光效.png') 0 0 / 100% 100%
      transform scale(0)
      animation bigBobm 1s
      animation-fill-mode forwards
      z-index 999
    .new-rewards
      position absolute
      $center('WHLT', 5rem, 5rem)
      display flex
      align-items center
      justify-content center
      margin-top -1rem
      background url($urlTitle + 'assignment/image/breakthrough/回答正确-奖励意象背景.png') 0 0 / 100% 100%
      img
        max-width 50%
        max-height 50%
        filter drop-shadow(1px 0px #fff) drop-shadow(-1px 0px #fff) drop-shadow(0px -1px #fff) drop-shadow(0px 1px #fff)
      .reword-name
        position absolute
        $center('WHLT', 18rem, 2rem)
        margin-top 2rem
        font-size 1rem
        font-weight 600
        color #f69101
        letter-spacing 0.2rem
        line-height 2rem
        text-align center
    .rewards
      position absolute
      $center('WHLT', 17rem, 3rem)
      top 76%
      .reward
        position absolute
        top 0
        width 3rem
        height 3rem
        line-height 3rem
        background url($urlTitle + 'assignment/image/breakthrough/回答正确-奖励意象背景.png') center center / contain no-repeat
        opacity 0
        animation fadeIn 0.5s ease 1s
        animation-fill-mode forwards
        $alignCenter()
        .reward-bobm
          position absolute
          $center('WHLT', 1.5rem, 1.5rem)
          background url($urlTitle + 'assignment/image/breakthrough/光效.png') 0 0 / 100% 100%
          transform scale(0)
          animation bigBobm 0.8s
          animation-fill-mode forwards
          $alignCenter()
          z-index 2
        img
          max-width 50%
          max-height 50%
          filter drop-shadow(0.5px 0px #fff) drop-shadow(-0.5px 0px #fff) drop-shadow(0px -0.5px #fff) drop-shadow(0px 0.5px #fff)
    .reward-finish
      position absolute
      $center('WHLT', 16rem, 8rem)
      margin-top -0.5rem
      display flex
      flex-wrap wrap
      justify-content center
      align-items center
      flex-direction column
      .reward-finish-list
        background url($urlTitle + 'assignment/image/breakthrough/回答正确-奖励意象背景.png') center center / contain no-repeat
        opacity 0
        animation fadeIn 0.5s
        animation-fill-mode forwards
        $alignCenter()
        img
          max-width 50%
          max-height 50%
          filter drop-shadow(1px 0px #fff) drop-shadow(-1px 0px #fff) drop-shadow(0px -1px #fff) drop-shadow(0px 1px #fff)
  .select
    position absolute
    $center('WHLT', 14rem, 5rem)
    margin-top 6rem
    .awards
      float left
      width 6rem
      height 5rem
      background url($urlTitle + 'assignment/image/breakthrough/领取奖励.png') center center / contain no-repeat
    .next
      float right
      width 6rem
      height 5rem
      background url($urlTitle + 'assignment/image/breakthrough/回答正确-下一题.png') center center / contain no-repeat
  .awards-finish
    position absolute
    $center('WHLT', 7rem, 5rem)
    margin-top 6rem
    background url($urlTitle + 'assignment/image/breakthrough/领取奖励.png') center center / contain no-repeat
</style>
